<script setup lang="ts">
import { ref, watch } from 'vue';

import ServiceVideo from './ServiceVideo.vue';
import ServiceDesc from './ServiceDesc.vue';
import ServiceOrder from './ServiceOrder.vue';
import ServiceCutting from './ServiceCutting.vue';
import ServiceSewing from './ServiceSewing.vue';
import ServicePlans from './ServicePlans.vue';
import ServiceIntroduction from './ServiceIntroduction.vue';


import { listServices } from '@/apis/services';

// 服务类型
const serviceOptions = ref<any[]>([
    {
        value: '50',
        payload: {
            title: '使用教学',
            subtitle: 'Video tutorial',
        },
    },
    {
        value: '60',
        payload: {
            title: '材料辅料',
            subtitle: 'Sewing material',
        },
    }
]);

// 当前选中服务类型
const currentSelectedService = ref<string>(serviceOptions.value.at(0).value);

const content = ref<any>(null);

watch(
    currentSelectedService,
    async val => {
        const { data } = await listServices({
            data: {
                type: val,
                pType: '1',
            },
        });
        content.value = data;
    },
    {
        immediate: true,
    },
);
</script>

<template>
    <div class="flex flex-col h-full bg-gray-100">
        <div
            class="py-3 bg-white border-0 border-b border-gray-200 border-solid px-80"
        >
            <a-segmented
                class="fill"
                v-model:value="currentSelectedService"
                :options="serviceOptions"
            >
                <template #label="{ payload }">
                    <span class="flex flex-col py-1">
                        <strong class="text-sm">
                            {{ payload.title }}
                        </strong>
                        <small class="text-xs text-gray-500">
                            {{ payload.subtitle }}
                        </small>
                    </span>
                </template>
            </a-segmented>
        </div>
        <div class="flex-1 overflow-y-scroll overscroll-contain">
            <ServiceVideo
                :data="content"
                v-if="currentSelectedService === '50'"
            />
            <ServiceDesc
                :data="content"
                v-if="currentSelectedService === '100'"
            />
            <ServiceOrder
                :data="content"
                v-if="currentSelectedService === '200'"
            />
            <ServiceCutting
                :data="content"
                v-if="currentSelectedService === '300'"
            />
            <ServiceSewing
                :data="content"
                v-if="currentSelectedService === '400'"
            />
            <ServicePlans
                :data="content"
                v-if="currentSelectedService === '600'"
            />  
            <ServiceIntroduction
                :data="content"
                v-if="currentSelectedService === '700'"
            /> 
        </div>
    </div>
</template>

<style lang="scss" scoped></style>
